<template>
  <div class="app-container">
    <!-- 测试 -->
    <!-- <el-form @submit.prevent :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="房间号" prop="roomNo">
        <el-input v-model="queryParams.roomNo" placeholder="请输入房间号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click.prevent="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- v-hasPermi="['crew:cabinet:add']" -->
        <el-button icon="Plus" @click="handleAdd">新增角色</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button icon="Delete" @click="handleDelete" v-hasPermi="['crew:cabinet:remove']">批量删除</el-button>
      </el-col> -->
    </el-row>

    <el-table v-loading="loading" :data="dataList" ref="tableRef">
      <el-table-column
        label="序号"
        type="index"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        label="角色名称"
        align="center"
        prop="roleName"
        width="180"
      />
      <el-table-column label="角色描述" align="center" prop="remark" />
      <el-table-column label="角色状态" align="center" prop="status" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column label="物理地址" align="center" prop="mac" width="100" /> -->

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="180"
      >
        <template #default="scope">
          <!-- v-hasPermi="['crew:qualifications:edit']"
           v-hasPermi="['crew:qualifications:edit']"
           v-hasPermi="['crew:qualifications:edit']" -->
          <el-button type="primary" link @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button type="primary" link @click="handleOpenBedManage(scope.row)"
            >配置权限</el-button
          >
          <el-button type="primary" link @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改工具箱信息 -->
    <page-modal v-model="open" :title="title" showClose :padding="20">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="roleName" label-width="120px">
          <el-input v-model.trim="form.roleName" placeholder="请输入房间号" />
        </el-form-item>
        <el-form-item label="角色描述" prop="remark" label-width="120px">
          <el-input v-model.number="form.remark" placeholder="请输入楼层号" />
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="120px">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status" label-width="120px">
          <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
            <el-option v-for="option in crew_apartment_roomstatus" :key="option.value" :label="option.label"
              :value="option.value" />
          </el-select>
        </el-form-item> -->
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="open = false">取 消</el-button>
          </div>
        </template>
      </el-form>
    </page-modal>

    <!-- 弹层显示床位信息管理 -->
    <!-- <page-modal v-model="bedOpen" title="床位管理" showClose :padding="20">
      <BedManage :current-room="currentRoom"/>
    </page-modal> -->
  </div>
</template>

<script setup name="Room">
import { toRaw, computed } from 'vue'
import PageModal from '@/components/PageModal'
// import BedManage from "./components/bedmanage.vue";
import {
  listRole,
  addRole,
  deleteRole,
  updateRole,
} from '@/api/system/roleManage.js'
// import { boxListInfo } from '@/api/crew/cabinettoolbox'
const { proxy } = getCurrentInstance()
// const { crew_apartment_roomstatus } = proxy.useDict("crew_apartment_roomstatus"); // 房间状态
// console.log(crew_apartment_roomstatus.value)
// const { cabinet_work_mode } = proxy.useDict("cabinet_work_mode"); // 柜子工作模式
// const { cabinet_property } = proxy.useDict("cabinet_property"); // 类型
const dataList = ref([])
const open = ref(false)
const loading = ref(true)
const tableRef = ref()
const total = ref(0)

const data = reactive({
  form: {
    status: '1',
  },
  queryParams: {
    current: 1,
    pageSize: 10,
  },
  rules: {
    roleName: [
      { required: true, trigger: 'blur', message: '角色名称不能为空' },
    ],
    // remark: [{ required: true, trigger: 'blur', message: '楼层号不能为空' }],
    // bedNumber: [{ required: true, trigger: 'blur', message: '床位数量不能为空' }],
    // // workMode: [{ required: true, trigger: 'blur', message: '请选择机柜工作模式' }],
    // status: [{ required: true, trigger: 'blur', message: '请选择状态' }],
  },
})

const { queryParams, form, rules } = toRefs(data)

/** 查询房间信息列表：等待接口 */
function getList() {
  loading.value = true
  listRole(queryParams.value)
    .then((response) => {
      console.log(response)

      dataList.value = response.data.data
      total.value = response.data.total
      loading.value = false
    })
    .catch((err) => {
      loading.value = false
    })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.current = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.name = ''
  proxy.resetForm('formRef')
  handleQuery()
}

function reset() {
  form.value = {
    status: '1',
  }
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = '添加角色信息'
}

/** 修改按钮操作 */
function handleUpdate(row) {
  // reset();
  form.value = { ...row }
  // selectRow.value = { ...row };
  // checkedSet.value = row.qualifications ? row.qualifications.split(",") : [];
  open.value = true
  title.value = '修改角色信息'
}

/** 提交按钮:等待新增和修改请求接口 */
function submitForm() {
  proxy.$refs['formRef'].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateRole(form.value).then((response) => {
          proxy.$modal.msgSuccess('修改角色成功')
          open.value = false
          getList()
        })
      } else {
        addRole(form.value).then((response) => {
          proxy.$modal.msgSuccess('新增角色成功')
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  console.log(row)
  proxy.$modal
    .confirm('是否确认删除 "' + row.roleName + '" 角色？')
    .then(function () {
      return deleteRole(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}

// const checkedSet = ref([]);
// const selectRow = ref({});

// /**全选 */
// function checkAllQualifications() {
//   checkedSet.value = person_qualifications_items.value.map((item) => item.value);
// }

// /**反选 */
// function checkReverseQualifications() {
//   let nos = [];
//   person_qualifications_items.value.map((item) => {
//     if (!checkedSet.value.includes(item.value)) {
//       nos.push(item.value);
//     }
//   });

//   checkedSet.value = nos;
// }

// /**重置 */
// function checkResetQualifications() {
//   checkedSet.value = selectRow.value.qualifications
//     ? selectRow.value.qualifications.split(",")
//     : [];

//   // checkedSet.value = []
// }

// /**清空 */
// function checkClearQualifications() {
//   checkedSet.value = [];
// }

// /**提交 */
// function submitQualifications() {
//   let params = checkedSet.value.map((item) => {
//     return {
//       infoId: selectRow.value.id,
//       setNo: item,
//     };
//   });
//   // 发送请求完成修改
//   // addInfoForSet(params).then((response) => {
//   //   proxy.$modal.msgSuccess("操作成功");
//   //   openApplicable.value = false;
//   //   getList();
//   // });
// }

// /** 点击状态按钮修改状态 */
// function handleStatusChange(row) {
//   let text = row.status == "1" ? "启用" : "停用";
//   proxy.$modal
//     .confirm("确认要" + text + "该房间吗?")
//     .then(function () {
//       return updateRoomInfo({
//         ...row,
//         status: row.status,
//       }).then((res) => {
//         proxy.$modal.msgSuccess(text + "成功");
//         getList();
//       });
//     })
//     .catch(function () {
//       row.status = row.status === 0 ? 1 : 0;
//     });
// }
getList()
</script>

<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    text-align: left;
  }
}
</style>
